<template>
  <div class="tab-detail-con" v-loading="uplaodfixPicLoading">
    <div>
      <span :class="[props.taskType == 'NEW_PRODUCT_PICTURE' ? 'required' : '']">关联产品SKU：</span>
      <span class="common-text">如果关联产品SKU则将任务交付物上传到产品SKU的资料库。</span>
    </div>
    <div class="sku-info">
      <a-select v-if="!skuInfo.id" :style="{ width: '180px' }" @change="handleChangeSku" :loading="searchSkuLoading" placeholder="请输入sku" @search="handleSearch" allow-clear allow-search :filter-option="false" :show-extra-options="false">
        <a-option v-for="(item, index) of skuOption" :key="index" :label="item.sku" :value="item.sku"></a-option>
      </a-select>
      <div class="clearfix sku-detail-con" style="font-size: 12px" v-else>
        <div class="fl">
          <ImgPopover :src="imgUrl(skuInfo)">
            <template #con>
              <a-image :preview="false" width="60" height="60" fit="contain" :src="imgUrl(skuInfo)" />
            </template>
          </ImgPopover>
        </div>
        <div class="fl" style="width: calc(100% - 80px); margin: 10px 10px 0 10px">
          <div>
            <a-space>
              <span class="common-text">名称：</span>
              <TextLimit position="top" :val="skuInfo.skuName"></TextLimit>
            </a-space>
          </div>
          <div style="margin-top: 5px">
            <span class="common-text">SKU：</span>
            <span>{{ skuInfo.sku }}</span>
            <span class="common-text" style="margin-left: 20px">SPU/类目:</span>
            <span v-if="props.type == 'add'">{{ $extract(skuInfo, 'productSpu.spu') }}/{{ $extract(skuInfo, 'productSpu.category.name') }}</span>
            <span v-else>{{ $extract(skuInfo, 'spu') }}/{{ $extract(skuInfo, 'category.name') }}</span>
          </div>
        </div>

        <div class="del-btn highlight cursor" @click="skuInfo = {}">
          <icon-delete style="font-size: 20px" />
        </div>
      </div>
    </div>
    <div v-if="!serviceItemInfo.id">
      <div class="title-bar mt10">
        <span>请选择服务商：</span>
        <span class="common-text" style="font-weight: 200">不同的服务商提供的服务和服务报价不同</span>
      </div>
      <div class="service-provide-con">
        <a-scrollbar style="width: 100%; height: 40px; overflow: auto">
          <div class="provider-item-con">
            <div @click="selProvider(item, index)" :class="['item', 'cursor', index == serviceProviderSelIndex ? 'active' : '']" v-for="(item, index) of serviceProviderList" :key="index">{{ item.companyShortName }}</div>
          </div>
        </a-scrollbar>
      </div>
      <div class="service-provider-statics">
        <a-space>
          <div>
            <span class="common-text">待接单数：</span>
            <span>{{ statics.waitAcceptNum || 0 }}</span>
          </div>
          <div>
            <span class="common-text">待执行数：</span>
            <span>{{ statics.waitScheduleNum || 0 }}</span>
          </div>
          <div>
            <span class="common-text">执行中数：</span>
            <span>{{ statics.executingNum || 0 }}</span>
          </div>
        </a-space>
      </div>

      <div class="service-item-list-con mt10">
        <a-scrollbar style="height: 300px; overflow: auto">
          <div class="service-goods-con">
            <div class="service-goods mr10 mb10" v-if="serviceItemList.length > 0" v-for="(item, index) of serviceItemList" :key="index" @click="showServiceDetail(item)">
              <div class="top clearfix">
                <div class="fl ser-Content">
                  <TextLimit :val="item.serContent" :rows="1" position="top"></TextLimit>
                </div>
                <div class="fr common-text">ID:{{ item.serShortId }}</div>
              </div>

              <div class="mt5" v-if="props.taskType == 'NEW_PRODUCT_PICTURE'">
                <span class="common-text">原图来源：</span>
                <span>{{ originPicSourceMap[item.originPicSource] }}</span>
                <span v-if="item.isSample" style="color: #979797; margin-left: 5px" class="icon icon-yangpin"></span>
              </div>

              <div class="mt5" v-if="props.taskType == 'SHOOT_VIDEO'">
                <span class="common-text">拍摄方式：</span>
                <span>{{ shootTypeMap[item.shootType] }}</span>
                <span v-if="item.isSample" style="color: #979797; margin-left: 5px" class="icon icon-yangpin"></span>
              </div>

              <div class="mt5">
                <span class="common-text">交付内容：</span>
                <span>{{ deliveryData(item.taskNodeList) }}</span>
              </div>
              <div class="mt5">
                <span class="common-text">执行周期：</span>
                <span>{{ item.executeCycle }}天</span>
              </div>
              <div class="mt5">
                <span class="common-text">预计交付日期：</span>
                <span>{{ $setTime(item.gmtPlanDelivery, 'YYYY-MM-DD') }}</span>
              </div>
              <div class="clearfix footer" style="margin-top: 20px">
                <div class="fl" style="width: 210px">
                  <span class="common-text">报价：</span>
                  <span
                    ><span style="color: red; font-size: 16px">￥{{ item.amtQuote }}</span
                    >/单</span
                  >
                </div>
                <div class="fr">
                  <a-button size="mini" shape="round" type="primary" @click.stop="selService(item)">选购</a-button>
                </div>
              </div>
            </div>
            <a-empty v-else />
          </div>
        </a-scrollbar>
      </div>
    </div>

    <a-scrollbar class="mt10" v-else style="height: 400px; overflow: auto">
      <div class="mt5">
        <div class="title-bar">服务商信息</div>
        <div>
          <span>服务商：</span>
          <span>{{ companyInfo.companyShortName }}</span>
        </div>
        <!-- 二选一，根据是否送样来判断 -->
        <div class="service-provider-statics" v-if="!serviceItemInfo.isSample">
          <a-space>
            <div>
              <span class="common-text">待接单数：</span>
              <span>{{ statics.waitAcceptNum || 0 }}</span>
            </div>
            <div>
              <span class="common-text">待执行数：</span>
              <span>{{ statics.waitScheduleNum || 0 }}</span>
            </div>
            <div>
              <span class="common-text">执行中数：</span>
              <span>{{ statics.executingNum || 0 }}</span>
            </div>
          </a-space>
        </div>
        <div class="com-address-statics" v-else>
          <div class="statstics">
            <div>
              <span class="common-text">待接单数：</span>
              <span>{{ statics.waitAcceptNum || 0 }}</span>
            </div>
            <div>
              <span class="common-text">待执行数：</span>
              <span>{{ statics.waitScheduleNum || 0 }}</span>
            </div>
            <div>
              <span class="common-text">执行中数：</span>
              <span>{{ statics.executingNum || 0 }}</span>
            </div>
          </div>
          <div class="address">
            <div style="font-weight: 700">样品送到以下地址</div>
            <div>{{ $extract(companyInfo, 'taskConfig.sampleAddress.userName') }}（{{ $extract(companyInfo, 'taskConfig.sampleAddress.phone') }}）</div>
            <div>{{ $extract(companyInfo, 'taskConfig.sampleAddress.stateOrRegion') }}，{{ $extract(companyInfo, 'taskConfig.sampleAddress.city') }}，{{ $extract(companyInfo, 'taskConfig.sampleAddress.address') }}</div>
          </div>
        </div>
        <!-- 显示服务信息 -->
        <div class="title-bar mt10">服务信息</div>
        <div class="service-info-con">
          <div>
            <span class="common-text">服务内容：</span>
            <span>{{ serviceItemInfo.serContent }}</span>
          </div>
          <div v-if="props.taskType == 'NEW_PRODUCT_PICTURE'">
            <span class="common-text">原图来源：</span>
            <span>{{ originPicSourceMap[serviceItemInfo.originPicSource] }}</span>
          </div>
          <div v-if="props.taskType == 'SHOOT_VIDEO'">
            <span class="common-text">拍摄方式：</span>
            <span>{{ shootTypeMap[serviceItemInfo.shootType] }}</span>
          </div>
          <div>
            <span class="common-text">交付内容：</span>
            <span>{{ deliveryData(serviceItemInfo.taskNodeList) }}</span>
          </div>
          <div>
            <a-space>
              <div>
                <span class="common-text">执行周期：</span>
                <span> {{ serviceItemInfo.executeCycle }} 天</span>
              </div>
              <div style="margin-left: 40px">
                <span class="common-text">预计交付日期：</span>
                <span>{{ $setTime(serviceItemInfo.gmtPlanDelivery, 'YYYY-MM-DD') }}</span>
              </div>
            </a-space>
          </div>
          <div>
            <span class="common-text">报价：</span>
            <span
              ><span style="color: red; font-size: 16px">￥{{ serviceItemInfo.amtQuote }}</span
              ><span>/单</span></span
            >
          </div>
        </div>

        <div v-if="(props.taskType == 'NEW_PRODUCT_PICTURE' && serviceItemInfo.originPicSource == 'C4D_RENDER') || (props.taskType == 'SHOOT_VIDEO' && serviceItemInfo.shootType == 'RENDER_SHOOT')">
          <div class="title-bar mt10">
            <span class="required">上传CAD文件</span>
            <span class="cursor highlight ml10 fs12" style="font-weight: 200" @click="getListForSkuInfo('CAD')">从产品上获取CAD</span>
          </div>
          <div class="common-text">渲染需要有产品CAD文件</div>
          <div>
            <a-upload action="/" @before-upload="(file) => uploadBefore(file, 'cad')">
              <template #upload-button>
                <a-button type="primary">上传文件</a-button>
              </template>
            </a-upload>
          </div>
          <div class="att-list-con">
            <div class="att-item clearfix" v-for="(item, index) of cadList" :key="index">
              <div class="fl">{{ item.name }}</div>
              <div style="margin-right: 5px" class="fr cursor" @click="cadList.splice(index, 1)"><icon-close /></div>
            </div>
          </div>
        </div>

        <div v-if="props.taskType == 'NEW_PRODUCT_PICTURE' && serviceItemInfo.originPicSource == 'APARTY_PROVIDE'">
          <div class="title-bar mt10">
            <span class="required">上传产品原图</span>
            <span class="cursor highlight ml10 fs12" style="font-weight: 200" @click="getListForSkuInfo('原图')">从产品上获取</span>
          </div>
          <div class="common-text">产品原图是修产品橱窗图的基础</div>
          <div class="product-img-box">
            <div class="box">
              <div class="box-img-con" v-for="(item, index) of originalPicList" :key="index">
                <div class="mask">
                  <div class="btn-con">
                    <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index)" />
                    <icon-delete class="cursor" @click="originalPicList.splice(index, 1)" />
                  </div>
                </div>
                <a-image :src="item.url" width="100%" height="100%" />
              </div>
              <div class="fl" style="width: 80px; height: 80px">
                <a-upload class="fl" :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="(file) => uploadBefore(file, 'originalPic')" />
              </div>
            </div>
          </div>
        </div>

        <div class="title-bar mt10">
          <a-space>
            <div>任务附件</div>
            <div>
              <a-upload action="/" @before-upload="(file) => uploadBefore(file, 'att')">
                <template #upload-button>
                  <a-button type="text">上传附件</a-button>
                </template>
              </a-upload>
            </div>
          </a-space>
        </div>
        <div class="common-text">如果还有其他跟任务相关的资料就在此上传相关任务</div>
        <div class="att-list-con">
          <div class="att-item clearfix" v-for="(item, index) of attList" :key="index">
            <div class="fl">{{ item.name }}</div>
            <div style="margin-right: 5px" class="fr cursor" @click="attList.splice(index, 1)"><icon-close /></div>
          </div>
        </div>
        <div class="title-bar mt10">任务要求</div>
        <a-textarea v-model="demand" placeholder="请输入任务要求" allow-clear />
        <div v-if="props.taskType == 'SHOOT_VIDEO'">
          <div class="title-bar">任务样片</div>
          <div>
            <a-radio-group v-model="videoUrl" @change="changeVideo">
              <div class="sel-template">
                <div class="item" v-for="(item, index) in VideoList" :key="index">
                  <div class="top">
                    <video :src="item.url" style="width: 180px; height: 100px" width="160" height="160" controls></video>
                  </div>
                  <div class="bottom">
                    <a-radio :value="item.url">样品{{ index + 1 }}</a-radio>
                  </div>
                </div>
              </div>
            </a-radio-group>
          </div>
        </div>
      </div>
    </a-scrollbar>
  </div>

  <serviceDetail v-if="showServiceDetailModal" v-model="showServiceDetailModal" :deliveryData="deliveryData" :statics="statics" :serviceInfo="serviceInfo" :companyInfo="companyInfo" />
  <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="originalPicList.map((e:any) => e.url)" />
</template>

<script lang="ts" setup>
  import serviceDetail from './serviceDetail.vue'
  import { defineComponent, ref, onMounted } from 'vue'
  import { deliveryMap, originPicSourceMap, shootTypeMap } from './map'
  import { OSSUpload } from '@/utils/ossUpload'
  import { getSkuDetailBySku } from '@/api/product'
  import { listFuzzyBySku, countTaskStatusByTakeCompanyId } from '@/api/task'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps(['taskType', 'type', 'showFooter'])
  let skuOption: any = ref([])
  let skuInfo: any = ref({})
  let serviceProviderList: any = ref([]) // 服务商列表1
  let serviceItemList: any = ref([]) // 服务列表
  let companyInfo: any = ref({}) // 选中服务商信息
  let serviceInfo: any = ref({}) //服务详情，用于显示详情
  let serviceItemInfo: any = ref({}) // 用户选购的服务
  let statics: any = ref({}) // 统计数据
  let serviceProviderSelIndex = ref(0) // 选中的服务商索引
  let attList: any = ref([]) // 上传的附件列表
  let cadList: any = ref([]) // CAD列表
  let originalPicList: any = ref([]) // 产品原图列表
  let demand: any = ref('') // 任务要求
  let videoUrl: any = ref('') // 选中的样片
  let videoObj: any = ref({}) // 选中的样片对象
  let VideoList: any = ref([])
  let searchSkuLoading = ref(false)
  let showServiceDetailModal = ref(false)
  let uplaodfixPicLoading = ref(false)
  let visible = ref(false)
  let current = ref(0)

  const handleSearch = async (value: string) => {
    if (value) {
      try {
        searchSkuLoading.value = true
        const res: any = await listFuzzyBySku({ sku: value })
        skuOption.value = res.data || []
      } catch (error) {}
      searchSkuLoading.value = false
    } else {
      skuOption.value = []
    }
  }

  const handleChangeSku: any = async (value: string) => {
    const res: any = await getSkuDetailBySku(value)
    skuInfo.value = res.data || {}
  }

  const imgUrl = (data: any) => {
    return (data?.productPicList && data?.productPicList[0]?.url) || ''
  }

  const showServiceDetail = (data: any) => {
    serviceInfo.value = data
    showServiceDetailModal.value = true
  }

  // 统计
  const getStatics = async () => {
    let params = {
      takeCompanyId: companyInfo.value.companyId,
    }
    const res: any = await countTaskStatusByTakeCompanyId(params)
    statics.value = res.data || {}
  }
  // 切换接单组织
  const selProvider = (item: any, index: number) => {
    serviceProviderSelIndex.value = index
    companyInfo.value = item
    serviceItemList.value = item.taskConfig?.taskServiceList || []
    getStatics()
  }

  const setServiceProviderList = (list: any, data: any) => {
    serviceProviderList.value = list
    if (!data?.id) {
      serviceProviderSelIndex.value = 0
      companyInfo.value = list[0] || {}
      serviceItemList.value = companyInfo.value.taskConfig?.taskServiceList || []
      getStatics()
    } else {
      let index = list.findIndex((e: any) => e.companyId == data.takeCompany.id)
      serviceProviderSelIndex.value = index
      companyInfo.value = list[index] || {}
      VideoList.value = companyInfo.value.taskConfig?.sampleVideoList || []
      serviceItemList.value = companyInfo.value.taskConfig?.taskServiceList || []
      // 回填选中的服务信息
      let item = serviceItemList.value.find((e: any) => e.id == data.taskRequire.id)
      serviceItemInfo.value = item || {}
      attList.value = data?.taskRequire?.attachmentList || []
      cadList.value = data?.taskRequire?.cadList || []
      originalPicList.value = data?.taskRequire?.originPicList || []
      demand.value = data?.taskRequire?.demand || ''
      skuInfo.value = data?.product || {}
      // 是否选了样片
      let videoInfo = data?.taskRequire?.sampleVideoList ? data?.taskRequire?.sampleVideoList[0] : {}
      videoUrl.value = videoInfo.url || ''
      videoObj.value = videoInfo
    }
    getStatics()
  }

  // 处理任务内容
  const deliveryData = (list: any) => {
    let arr = list.reduce((pre: any, cur: any) => {
      return (pre = [...pre, ...cur.taskContentList])
    }, [])
    return arr
      .filter((ell: any) => ell.quantity && ell.quantity > 0)
      .map((e: any) => `${deliveryMap[e.contentType]}×${e.quantity}`)
      .join(',')
  }

  // 上传附件
  const uploadBefore: any = async (file: File, type: string) => {
    uplaodfixPicLoading.value = true
    const res: any = await OSSUpload(file)
    uplaodfixPicLoading.value = false
    if (res) {
      let obj = {
        url: res.url,
        name: res.name.split('/')[res.name.split('/').length - 1],
      }
      if (type == 'att') {
        attList.value.push(obj)
      } else if (type == 'cad') {
        cadList.value.push(obj)
      } else {
        originalPicList.value.push(obj)
      }
    }
  }

  // 清空sku信息
  const resetSkuInfo = () => {
    skuInfo.value = {}
  }
  // 清空服务信息
  const resetServiceInfo = () => {
    serviceItemInfo.value = {}
  }

  const selService = (data: any) => {
    attList.value = []
    originalPicList.value = []
    cadList.value = []
    demand.value = ''
    VideoList.value = companyInfo.value.taskConfig?.sampleVideoList || []
    serviceItemInfo.value = data
    props.showFooter(data)
  }

  // 通过SKU获取cad文件
  const getListForSkuInfo = (skuType: String) => {
    if (!skuInfo.value.id) {
      return Message.error('请选择sku')
    }
    let arr = skuInfo.value.productSpu?.productInfoList || []
    if (skuType == 'CAD') {
      let cadArr: any = arr.filter((e: any) => e.type == skuType)
      if (!cadArr[0]) return Message.error('产品上没有CAD文件')
      cadList.value = [...cadList.value, ...cadArr]
    } else {
      let originalPicArr = arr.filter((e: any) => e.type == skuType)
      if (!originalPicArr[0]) return Message.error('产品上没有原图文件')
      originalPicList.value = [...originalPicList.value, ...arr.filter((e: any) => e.type == skuType)]
    }
  }

  const showImgPre = (index: number) => {
    current.value = index
    visible.value = true
  }

  const getForm = () => {
    let params: any = {
      takeCompany: {
        id: companyInfo.value.companyId,
        companyShortName: companyInfo.value.companyShortName,
      },
    }
    if (props.taskType == 'NEW_PRODUCT_PICTURE' && !skuInfo.value.id) {
      Message.error('请选择sku')
      return false
    }

    if (props.taskType == 'NEW_PRODUCT_PICTURE' && serviceItemInfo.value.originPicSource == 'C4D_RENDER' && !cadList.value[0]) {
      Message.error('请上传CAD文件')
      return false
    }

    if (props.taskType == 'NEW_PRODUCT_PICTURE' && serviceItemInfo.value.originPicSource == 'APARTY_PROVIDE' && !originalPicList.value[0]) {
      Message.error('请上传原图')
      return false
    }

    if (skuInfo.value.id) {
      let arr = skuInfo.value.productSpu?.productInfoList || []
      let obj = {
        id: skuInfo.value.id,
        cadList: props.type == 'add' ? arr.filter((e: any) => e.type == 'CAD') : skuInfo.value.cadList,
        category: props.type == 'add' ? skuInfo.value.productSpu?.category || {} : skuInfo.value.category,
        developer: props.type == 'add' ? skuInfo.value.productSpu?.developer || {} : skuInfo.value.developer,
        handDrawList: props.type == 'add' ? arr.filter((e: any) => e.type == '手绘稿') : skuInfo.value.handDrawList,
        originPicList: props.type == 'add' ? arr.filter((e: any) => e.type == '原图') : skuInfo.value.originPicList,
        productPicList: skuInfo.value.productPicList || [],
        sku: skuInfo.value.sku,
        skuName: skuInfo.value.skuName,
        spu: props.type == 'add' ? skuInfo.value.productSpu?.spu : skuInfo.value.spu,
        spuName: props.type == 'add' ? skuInfo.value.productSpu?.spuName : skuInfo.value.spuName,
      }
      params.product = obj
    }

    let taskRequire: any = {
      id: serviceItemInfo.value.id,
      isSample: serviceItemInfo.value.isSample,
      amtQuote: serviceItemInfo.value.amtQuote,
      attachmentList: attList.value || [],
      cadList: cadList.value || [],
      originPicList: originalPicList.value || [],
      demand: demand.value,
      executeCycle: serviceItemInfo.value?.executeCycle,
      serContent: serviceItemInfo.value?.serContent,
      serDesc: serviceItemInfo.value?.serDesc,
      serShortId: serviceItemInfo.value?.serShortId,
      taskNodeList: serviceItemInfo.value?.taskNodeList,
    }
    // 样片
    if (props.taskType == 'SHOOT_VIDEO' && videoObj.value.url) {
      taskRequire.sampleVideoList = [videoObj.value]
    }
    // 送样地址
    if (serviceItemInfo.value.isSample) {
      params.sendSample = {}
      params.sendSample.sampleAddress = companyInfo.value.taskConfig?.sampleAddress
    }

    if (props.taskType == 'NEW_PRODUCT_PICTURE') {
      taskRequire.originPicSource = serviceItemInfo.value.originPicSource
    }
    if (props.taskType == 'SHOOT_VIDEO') {
      taskRequire.shootType = serviceItemInfo.value.shootType
    }
    params.taskRequire = taskRequire
    return params
  }

  // 选中样片
  const changeVideo = (url: string) => {
    console.log(url)
    let item = VideoList.value.find((e: any) => e.url == url)
    videoObj.value = item
  }

  onMounted(() => {})

  defineExpose({ setServiceProviderList, resetServiceInfo, resetSkuInfo, getForm })
</script>

<style lang="less" scoped>
  .ser-Content {
    width: 150px;
    font-size: 16px;
    font-weight: 700;
  }

  .mt5 {
    margin-top: 5px;
  }

  .fs12 {
    font-size: 12px;
  }

  .tab-detail-con {
    padding: 5px;
    .sku-info {
      padding: 5px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      min-height: 60px;
      .sku-detail-con {
        position: relative;
        .del-btn {
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }
    }
    .service-provide-con {
      width: 100%;
      padding: 5px 0;
      box-sizing: border-box;
      .provider-item-con {
        white-space: nowarp;
        display: inline-flex;
        .item {
          font-size: 12px;
          width: 160px;
          margin-right: 10px;
          padding: 5px 10px;
          border: 1px solid #d7d7d7;
          text-align: center;
          border-radius: 5px;
        }
        .active {
          border-color: #165dff;
          color: #165dff;
        }
      }
    }
    .service-provider-statics {
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 12px;
    }
    .service-item-list-con {
      .service-goods-con {
        display: flex;
        flex-wrap: wrap;
      }
      .service-goods {
        width: 276px;
        height: 200px;
        border: 1px solid #e5e6eb;
        border-radius: 5px;
        padding: 5px;
        font-size: 12px;
        position: relative;
        .footer {
          position: absolute;
          bottom: 7px;
        }
      }
    }
  }

  .com-address-statics {
    display: flex;
    margin-top: 10px;
    .statstics {
      width: 100px;
      border: 1px solid #d7d7d7;
      padding: 5px;
      font-size: 12px;
    }
    .address {
      flex: 1;
      padding: 5px;
      font-size: 12px;
      margin-left: 10px;
      border: 1px solid #d7d7d7;
    }
  }

  .att-list-con {
    margin-top: 5px;
    .att-item {
      width: 100%;
      font-size: 12px;
      background-color: #d7d7d7;
      padding: 5px 10px;
      border-radius: 3px;
      margin-bottom: 8px;
    }
  }

  .sel-template {
    width: 100%;
    min-height: 100px;
    // border: 1px solid #d7d7d7;
    border-radius: 5px;
    // margin-top: 20px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 180px;
      height: 140px;
      margin-right: 10px;
      .top {
        width: 180px;
        height: 100px;
      }
    }
  }

  .product-img-box {
    overflow: hidden;
    .box {
      margin-top: 5px;
      // min-height: 180px;
      // border-right: 1px solid #d7d7d7;
      .box-img-con {
        float: left;
        width: 80px;
        height: 80px;
        position: relative;
        margin: 0 10px 10px 0;
        &:hover {
          .mask {
            display: block;
          }
        }
        .mask {
          height: 80px;
          width: 80px;
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          z-index: 1;
          background: rgba(0, 0, 0, 0.5);
          .btn-con {
            width: 80px;
            color: white;
            font-size: 18px;
            text-align: center;
            margin-top: 25px;
            align-items: center;
          }
        }
      }
    }
  }
</style>
